<nz-page-header nzTitle="商品">
    <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>
            <a [routerLink]="['/']">首页</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
            <a [routerLink]="['/mall']">商城</a>
        </nz-breadcrumb-item>
    </nz-breadcrumb>
</nz-page-header>

<nz-card [nzExtra]="extraAction">
    <ng-template #extraAction>
        <button nz-button nzSize="large" class="mr-4" (click)="add()" nzType="primary">{{'mall.spu.create' | translate}}</button>
        <button nz-button nzSize="large" (click)="refresh()">{{'refresh' | translate}}</button>
    </ng-template>
    <nz-table #dataTable nzShowSizeChanger nzShowPagination [nzFrontPagination]="false" [nzData]="dataItems" [nzTotal]="pageingInfo.totalItems"
        [(nzPageSize)]="pageingInfo.pageSize" [(nzPageIndex)]="pageingInfo.pageNumber" [nzLoading]="pageingInfo.isTableLoading" (nzPageIndexChange)="refresh()"
        (nzPageSizeChange)="refresh()">
        <thead>
            <tr>
                <!-- <th>Id</th> -->
                <th class="text-center" width="100px">商户</th>
                <th class="text-center" width="100px">分类</th>
                <th class="text-center" width="250px">商品名称</th>
                <th class="text-center" width="200px">编码</th>
                <th class="text-center" width="400px">价格</th>
                <th>
                    客户端 <tt-tooltip text="按需显示的APP"></tt-tooltip>
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of dataTable.data">
                <!-- <td>{{item.id}}</td> -->
                <td>
                    {{item.shop.name}}
                </td>
                <td>{{item.category.name}}</td>
                <td class="h4">{{item.name}}
                </td>
                <td>{{item.code}}</td>
                <td class=" p-0">
                    <table class="table table-sm table-striped table-hover">
                        <tr>
                            <th></th>
                            <th style="width:200px;" class="text-center">Sku名称</th>
                            <th style="width:50px;" class="text-center">库存</th>
                            <th class="text-center">价格</th>
                        </tr>
                        <tr *ngFor="let sku of item.skus" [class.bg-gray]="sku.stockCount===0">
                            <td>
                                <nz-avatar nzShape="square" [nzSize]="48" nzSize="large" nzIcon="user" [nzSrc]="sku.coverImageUrls[0]"></nz-avatar>
                            </td>
                            <td> {{sku.name}}</td>
                            <td class=" text-center">
                                {{sku.stockCount}}
                            </td>
                            <td class=" text-center">
                                {{sku.price | currency}} <br /> {{sku.unit}}</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <nz-tag [nzColor]="getRndColor(app.appName)" *ngFor="let app of item.appProductSpus" (click)="getQR(item,app.appName,row)" #row>
                        {{app.appName | translate}}</nz-tag>
                </td>
                <td>
                    <button nz-button nzType="primary" nzShape="circle" [routerLink]="['/mall/spu-edit', item.id]">
                        <i nz-icon nzType="edit"></i>
                    </button>
                    <nz-divider nzType=" vertical"></nz-divider>
                    <button nz-button nzType="danger" nzShape="circle" nz-popconfirm [nzPopconfirmTitle]="'确定删除吗?'" (nzOnConfirm)="delete(item)"
                        nzPopconfirmPlacement="top"><i nz-icon nzType="delete"></i></button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>

<!--弹出动态内容模板-->
<ng-template #overlay>
    <div class="overlay-wrap">
        <div class="overlay-content">
            <div style="overflow: auto;">
                <img [src]="qrSrc" style="width:280px;height:280px;" />
            </div>
            <div class="overlay-content-arrow"></div>
        </div>
    </div>
</ng-template>
